<template>
	<view>
		<view>
			<view>
				<u-navbar title="编辑应用" bgColor="#2289FF" titleStyle="color: #fff;font-weight: bold" placeholder
					leftIconColor="#fff">
					<view slot="left" class="u-nav-slot">
						<u-icon name="arrow-left" size="25" color="#ffffff" @click="navigater"></u-icon>
						<view v-if="appIds.length" style="color: #fff;font-size: 32rpx;line-height: 25px;margin-left: 20rpx;" @click="rightClick">
							保存
						</view>
					</view>
				</u-navbar>
				<!-- <u-navbar title="编辑应用" @rightClick="rightClick" bgColor="#2289FF" leftIconColor="#fff"
					titleStyle="color: #fff" :autoBack="true" placeholder>
					<view v-if="appIds.length" style="color: #fff;font-size: 28rpx;">
						保存
					</view>
				</u-navbar> -->
			</view>
			<view>
				<view v-if="!appIds.length">
					<NoData src="https://pc.chinaonebuild.com/images/workspace/nodataPermission.png" width="256rpx" height="256rpx"
						top="274rpx" msg="您暂无权限使用更多功能" />
				</view>
				<view v-else>
					<view class="common-fun common1">
						<view class="box-common" style="border-left: none;">
							<view class="title fs28">
								常用功能
							</view>
						</view>
						<view class="mt-10" id="drap" v-if="commonFun.length">
							<shmily-drag-image  keyName="label" v-model="commonFun" @optionApp="optionApp"></shmily-drag-image>
						</view>
					</view>
					<view v-for="(o,index) in resultList[systemType]" :key="index">
						<view class="space" v-if="spaceList[index]" />
						<view class="common-fun" v-if="spaceList[index]" style="padding-right: 12rpx !important;">
							<view class="box-common">
								<view class="title fs28">
									{{titleList[index]}}
								</view>
							</view>
							<view class="box-item mt-10" v-if="o.length">
								<view v-for="(it,ind) in o" :key="ind" :class="{'ml-10': ind%4===0,'fun-item': ind%4 != 0,'mt-30': ind>3,'mb-50': true}">
									<view>
										<image :src="`https://pc.chinaonebuild.com/images/workspace/${it.icon}.png`" mode="" class="item-center-img"></image>
										<!-- <u-image width="88rpx" height="88rpx" :src="`https://pc.chinaonebuild.com/images/workspace/${it.icon}.png`" /> -->
									</view>
									<view :class="{fs24:true, 'mt-10':true,labelSet5: it.label.length==5,labelSet6: it.label.length==6,labelSet7: it.label.length==7}" style="position: absolute;width: 180rpx;">
										{{it.label}}
									</view>
									<view class="subscript" @click="optionApp(ind,index+2)">
										<image src="https://pc.chinaonebuild.com/images/workspace/add.png" mode="" class="item-center-add"></image>
										<!-- <u-image width="32rpx" height="32rpx" src="https://pc.chinaonebuild.com/images/workspace/add.png">
										</u-image> -->
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import NoData from "@/components/noData/index.vue"
	// import Sortable from "sortablejs"
	export default {
		components: {
			NoData,
		},
		data() {
			return {
				drap: false,

				// 登录时保存在缓存中的应用路径列表
				appPaths: {},
				// 登录时保存在缓存中的应用菜单id列表
				appIds: [],
				//常用操作列表
				commonFun: [],
				//常用操作label列表
				commonLabelList: [],
				// 各系统各区域块儿位于第几个，不包含常用功能
				allApplication: {},
				// 区域上边是否有空块
				spaceList: [],
				
				// 0:智慧建造  1:生产运营
				systemType: 0,
				// 区域名称
				titleList: [],
				// 用户权限菜单 智慧建造、生产运营
				initList: [
					[],
					[]
				],
				// 当前应展示的 智慧建造/生产运营（去除常用功能所剩下的）
				resultList: [
					[],
					[]
				],
				ifLongPress: true,

			}
		},
		async onLoad(opt) {
			await this.getCommonFunciton()
			await this.initApp()
			// // 用户权限菜单所有菜单路径
			this.appPaths = uni.getStorageSync('APPLICATION_PATHS');
			// // 用户权限菜单所有菜单menuId
			this.appIds = uni.getStorageSync('APPLICATION_PATHS_IDS');
			
			this.systemType = uni.getStorageSync('systemType')
			
			this.spaceList = uni.getStorageSync('spaceList')
			// this.commonFun = opt.funlist
			// this.commonLabelList = uni.getStorageSync('commonLabelList')
			this.titleList = uni.getStorageSync('titleList')
			this.initList = uni.getStorageSync('initList')
			this.resultList = uni.getStorageSync('resultList')
		},
		methods: {
			async getCommonFunciton() {
				await this.$api.getCommonFun().then(res => {
					if (res.code == 200) {
						this.commonFun = []
						this.commonLabelList = []
						res.data.forEach(it => {
							let obj = {
								label: it.menu.menuName,
								menuId: it.menuId,
								icon: it.menu.icon,
							}
							this.commonFun.push(obj)
							this.commonLabelList.push(obj.label)
						})
					}
				})
			},
			/* getAppIcon(icon){
				return require(`https://pc.chinaonebuild.com/images/workspace/${icon}.png`)
			}, */
			// 获取该用户权限菜单
			async initApp() {
				await this.$api.applicationType().then((res) => {
					this.allApplication = []
					let appList = res.data
					appList.forEach((it,ind)=>{
						// 块内部各应用
						let arr = []
						it.children&&it.children.forEach((it2,ind2)=>{
							arr[ind2] = []
							it2.children&&it2.children.forEach(it3=>{
								// 块内部各应用
								arr[ind2].push({
									label: it3.meta.title,
									icon: it3.meta.icon
								})
								this.allApplication[it3.meta.title] =  ind2
							})
						})
					})
				})
			},
			navigater(){
				uni.navigateBack()
			},
			// 保存
			rightClick() {
				if (this.appIds.length) {
					let keys = Object.keys(this.appPaths)
					let menuIds = []
					this.commonFun.forEach(it => {
						menuIds.push(this.appIds[keys.indexOf(it.label)])
					})
					this.$api.addCommonFun(menuIds).then(res => {
						if (res.code == 200) {
							uni.showToast({
								icon: "none",
								title: "保存成功",
								duration: 2000
							})
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 2000)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
				}
			},
			ifShowSpace(labels) {
				let hasApp = false
				labels.forEach(it => {
					if (this.commonLabelList.indexOf(it) != -1) {
						hasApp = true
					}
				})
				return hasApp
			},
			// 获取常用功能列表
			typeCommon(ind) {
				let label = this.commonLabelList[ind]
				this.commonLabelList = this.commonFun.map(it => {
					return it.label
				})
				// // 查看删除的应用是属于哪个区域块的
				let result = this.allApplication[label]
				let newLabel = [label, ...this.resultList[this.systemType][result].map(it => {
					return it.label
				})]
				this.resultList[this.systemType][result] = []
				this.initList[this.systemType][result].forEach((item) => {
					if (newLabel.indexOf(item.label) != -1) {
						this.resultList[this.systemType][result].push(item)
					}
				})
			},
			checkIFCanAdd() {
				if (this.commonFun.length == 8) {
					uni.showToast({
						title: "首页区块最多添加8个应用\n超出的部分请先移除再添加",
						icon: "none",
						duration: 3000
					})
					return false
				} else {
					return true
				}
			},
			// 从其他区域添加到常用功能区
			addToCommon(ind, oInd) {
				let canAdd = this.checkIFCanAdd()
				if (canAdd) {
					this.commonFun.push({
						...this.resultList[this.systemType][oInd][ind]
					})
					this.resultList[this.systemType][oInd].splice(ind, 1)
					this.commonLabelList = this.commonFun.map(it => {
						return it.label
					})
				}
			},
			// 删除/添加
			optionApp(index, flag) {
				switch (flag) {
					case 1:
						this.typeCommon(index)
						break;
					default:
						this.addToCommon(index, flag - 2)
						break;
				}
			},
		},

	}
</script>

<style lang="scss" scoped>
	.u-nav-slot{
		display: flex;
	}
	.common-fun {
		padding: 28rpx;

		.box-item {
			padding: 28rpx 17rpx;
			overflow-x: hidden;

			>view {
				display: inline-block;
				position: relative;

				.subscript {
					position: absolute;
					right: -15rpx;
					top: -15rpx;
					.item-center-add{
						width: 32rpx;
						height: 32rpx;
					}
				}

				.commonSubscript {
					right: 65rpx;
					top: -10rpx;
				}
			}
			
			.item-center-img {
				width: 88rpx;
				height: 88rpx;
			}
		}

		.box-item1 {
			padding-right: 0;
		}

		.fun-item {
			margin-left: 93rpx;
		}
	}

	.common1 {
		padding-right: 0;
	}

	.box-common {
		display: flex;
		justify-content: space-between;
		border-left: #2289FF solid 8rpx;
		padding-left: 12rpx;
		padding-right: 12rpx;

		.title {
			font-weight: 500;
			color: #303133;
			font-weight: 500;
		}
	}

	.fs24 {
		@include text-font-size(24rpx)
	}

	.fs28 {
		@include text-font-size(28rpx)
	}

	.space {
		@include center-space()
	}



	.mr30 {
		padding-right: 81rpx;
		margin-bottom: 20rpx;
	}
	.labelSet5{
		left: -18rpx;
	}
	.labelSet6{
		left: -26rpx;
	}
	.labelSet7{
		left: -28rpx;
	}
</style>
